<template>
	<div class="grid-layout-container">
        <div style="height: 100%; width: 100%;" ref="chartsWarningRefNode"></div>
	</div>
</template>
 
<script setup lang="ts" name="funGridLayout">
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {reactive, onMounted, watch, nextTick, onActivated, ref } from 'vue';

const props = withDefaults(defineProps<{
    data: Array<{value: number, name: string}>
}>(), {
    data: () => ([]),
})

const chartsWarningRefNode = ref(); 
const state = reactive({
	status: 1, 
	myCharts: [] as EmptyArrayType,
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
});



// 初始化近30天预警总数
const initChartsWarning = () => {
    if(!chartsWarningRefNode.value) return;
	const myChart = echarts.init(chartsWarningRefNode.value);
	const option = {
		tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          position: "bottom",
        },
		series: [
			{
				name: '门店名称',
				type: 'pie',
				radius: ["70%", "95%"],
				avoidLabelOverlap: true,
				label: {
				normal: {
					show: false,
					position: "center",
					formatter: "总计:{c}",
				},
				emphasis: {
					show: true,
					textStyle: {
					fontSize: "16",
					fontWeight: "bold",
					},
				},
				},
				labelLine: {
				show: false,
				},
				data: [
					{ value: 40, name: '监测设备预警' },
					{ value: 38, name: '天气预警' },
					{ value: 32, name: '任务预警' },
					{ value: 30, name: '病虫害预警' },
				],
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			state.myCharts[i].resize();
		}
	});
};
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
	// setTimeout(() => {
	// 	initChartsWarning();
	// 	initEchartsResize();
	// }, 1000);
    // initChartsWarning();
    // console.log(props.data);
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	//initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => props,
	() => { 
        nextTick(() => {
            initChartsWarning();
        })
	},
    {
        immediate: true
    }
);
</script>

<style scoped lang="scss">
.grid-layout-container {
    .home-card-item{
		height: 100%;
	}
	.vue-grid-item {
		// color: var(--el-color-white);
		color: #333;
	}
}
</style>
